<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高中同学大学分布地图 - 离线版</title>
    <!-- 本地化Leaflet资源 -->
    <link rel="stylesheet" href="leaflet.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0d1b2a, #1b263b);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        
        header {
            text-align: center;
            padding: 20px 0;
            margin-bottom: 15px;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #ff9d00, #ffcc00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.85;
            margin-bottom: 5px;
        }
        
        .dashboard {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .controls-row {
            display: flex;
            justify-content: center;
            padding: 15px;
            background: rgba(0, 20, 40, 0.4);
            border-radius: 15px;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(100, 180, 255, 0.2);
        }
        
        .search-box {
            width: 100%;
            max-width: 600px;
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            padding: 12px 20px;
            border: none;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.12);
            color: white;
            font-size: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .search-box input:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 204, 0, 0.5);
        }
        
        .search-box input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        
        .map-container {
            flex: 1;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(100, 180, 255, 0.3);
            min-height: 400px;
            background: #0a1a42;
        }
        
        #map {
            width: 100%;
            height: 100%;
        }
        
        .legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 15px;
            background: rgba(0, 20, 40, 0.4);
            border-radius: 15px;
            margin-top: 20px;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(100, 180, 255, 0.2);
            flex-wrap: wrap;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }
        
        .legend-color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        
        .student-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 25px;
            padding: 0 10px;
        }
        
        .student-card {
            background: rgba(26, 65, 119, 0.4);
            border-radius: 15px;
            padding: 20px;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(100, 180, 255, 0.2);
            cursor: pointer;
        }
        
        .student-card:hover {
            background: rgba(40, 90, 150, 0.5);
            transform: translateY(-5px);
            border-color: rgba(255, 204, 0, 0.5);
        }
        
        .student-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff9d00, #ffcc00);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 20px;
            margin-right: 15px;
            color: #fff;
            flex-shrink: 0;
        }
        
        .student-info h3 {
            font-size: 1.2rem;
            margin-bottom: 8px;
            color: #ffcc00;
        }
        
        .student-info p {
            font-size: 0.95rem;
            opacity: 0.9;
            margin-bottom: 3px;
        }
        
        .footer {
            text-align: center;
            padding: 20px;
            margin-top: 30px;
            font-size: 0.9rem;
            opacity: 0.8;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* 自定义标记点样式 */
        .map-marker {
            width: 35px;
            height: 35px;
            border-radius: 50% 50% 50% 0;
            background: linear-gradient(135deg, #ff9d00, #ffcc00);
            position: relative;
            transform: rotate(-45deg);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        
        .map-marker::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: white;
            transform: rotate(45deg);
        }
        
        .map-marker-text {
            transform: rotate(45deg);
            color: #1a2a6c;
            font-weight: bold;
            font-size: 12px;
            position: absolute;
            z-index: 1;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
            
            .student-list {
                grid-template-columns: 1fr;
            }
            
            .legend {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>高中同学大学分布地图</h1>
            <p class="subtitle">毕业班级：高三(5)班 | 总人数：48人 | 覆盖省份：23个</p>
            <p class="subtitle">数据最后更新：2023年8月15日 | 离线模式</p>
        </header>
        
        <div class="dashboard">
            <div class="controls-row">
                <div class="search-box">
                    <input type="text" id="searchInput" placeholder="搜索同学姓名或大学...">
                </div>
            </div>
        </div>
        
        <div class="map-container">
            <div id="map"></div>
        </div>
        
        <div class="legend">
            <div class="legend-item">
                <div class="legend-color" style="background: #ffcc00;"></div>
                <span>同学位置</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background: #1e90ff;"></div>
                <span>省份边界</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background: #32cd32;"></div>
                <span>特别行政区</span>
            </div>
        </div>
        
        <div class="student-list" id="studentList">
            <!-- 学生卡片将通过JS动态生成 -->
        </div>
        
        <div class="footer">
            <p>© 2023 高三(5)班毕业纪念 | 基于Leaflet.js和本地GeoJSON数据</p>
        </div>
    </div>

    <!-- 本地化Leaflet JS -->
    <script src="leaflet.js"></script>
    <script>
        // 初始化地图
        const map = L.map('map', {
            center: [35.0, 105.0],
            zoom: 4,
            zoomControl: false,
            attributionControl: false
        });
        
        // 添加缩放控件
        L.control.zoom({
            position: 'topright'
        }).addTo(map);
        
        // 加载本地GeoJSON文件（行政区划轮廓）
        fetch('china.json')
            .then(response => response.json())
            .then(data => {
                // 添加中国边界
                L.geoJSON(data, {
                    style: function(feature) {
                        // 根据省份类型设置不同颜色
                        const isSpecial = ['香港', '澳门', '台湾'].includes(feature.properties.name);
                        return {
                            color: isSpecial ? '#32cd32' : '#1e90ff',
                            weight: 1.5,
                            fillOpacity: 0.1,
                            fillColor: '#0a1a42',
                            dashArray: isSpecial ? '5, 5' : '3'
                        };
                    },
                    onEachFeature: function(feature, layer) {
                        // 添加省份名称标签
                        const center = layer.getBounds().getCenter();
                        L.marker(center, {
                            icon: L.divIcon({
                                className: 'province-label',
                                html: `<div style="font-size:12px; color:#fff; text-shadow: 0 0 3px #000;">${feature.properties.name}</div>`,
                                iconSize: [100, 20],
                                iconAnchor: [50, 10]
                            })
                        }).addTo(map);
                        
                        // 添加悬停效果
                        layer.on('mouseover', function(e) {
                            layer.setStyle({
                                weight: 3,
                                color: '#ffcc00'
                            });
                        });
                        
                        layer.on('mouseout', function(e) {
                            layer.setStyle({
                                weight: 1.5,
                                color: feature.properties.name === '台湾' ? '#32cd32' : '#1e90ff'
                            });
                        });
                    }
                }).addTo(map);
            })
            .catch(error => {
                console.error('加载中国边界数据时出错:', error);
                // 显示错误信息
                const errorDiv = document.createElement('div');
                errorDiv.innerHTML = '<p style="color:red; padding:20px; text-align:center;">无法加载地图数据，请确保china.json文件存在</p>';
                document.querySelector('.map-container').appendChild(errorDiv);
            });
        
        // 同学数据
        const studentData = [
            { name: "张三", university: "北京大学", city: "北京", province: "北京", lat: 39.9042, lng: 116.4074 },
            { name: "李四", university: "清华大学", city: "北京", province: "北京", lat: 40.0000, lng: 116.3300 },
            { name: "王五", university: "复旦大学", city: "上海", province: "上海", lat: 31.3040, lng: 121.5111 },
            { name: "赵六", university: "上海交通大学", city: "上海", province: "上海", lat: 31.2089, lng: 121.4375 },
            { name: "钱七", university: "浙江大学", city: "杭州", province: "浙江", lat: 30.2741, lng: 120.1551 },
            { name: "孙八", university: "南京大学", city: "南京", province: "江苏", lat: 32.0589, lng: 118.7969 },
            { name: "周九", university: "中山大学", city: "广州", province: "广东", lat: 23.0940, lng: 113.3020 },
            { name: "吴十", university: "武汉大学", city: "武汉", province: "湖北", lat: 30.5385, lng: 114.3680 },
            { name: "郑十一", university: "四川大学", city: "成都", province: "四川", lat: 30.6359, lng: 104.0935 },
            { name: "王十二", university: "西安交通大学", city: "西安", province: "陕西", lat: 34.2497, lng: 108.9978 },
            { name: "李十三", university: "哈尔滨工业大学", city: "哈尔滨", province: "黑龙江", lat: 45.7500, lng: 126.6333 },
            { name: "刘十四", university: "厦门大学", city: "厦门", province: "福建", lat: 24.4422, lng: 118.1040 },
            { name: "陈十五", university: "南开大学", city: "天津", province: "天津", lat: 39.1172, lng: 117.1820 },
            { name: "杨十六", university: "山东大学", city: "济南", province: "山东", lat: 36.6700, lng: 117.1000 },
            { name: "黄十七", university: "吉林大学", city: "长春", province: "吉林", lat: 43.8833, lng: 125.3167 },
            { name: "赵十八", university: "中南大学", city: "长沙", province: "湖南", lat: 28.1670, lng: 112.9360 }
        ];
        
        // 添加标记点到地图
        const markers = [];
        studentData.forEach((student, index) => {
            // 创建自定义标记点
            const markerElement = document.createElement('div');
            markerElement.className = 'map-marker';
            const markerText = document.createElement('div');
            markerText.className = 'map-marker-text';
            markerText.textContent = student.name.charAt(0);
            markerElement.appendChild(markerText);
            
            const marker = L.marker([student.lat, student.lng], {
                icon: L.divIcon({
                    className: 'custom-marker',
                    html: markerElement,
                    iconSize: [35, 35],
                    iconAnchor: [17, 35]
                })
            }).addTo(map);
            
            // 添加弹出信息
            marker.bindPopup(`
                <div style="font-weight: bold; font-size: 16px; margin-bottom: 8px; color: #ff9d00;">
                    ${student.name}
                </div>
                <div style="margin-bottom: 5px;">
                    <strong>大学:</strong> ${student.university}
                </div>
                <div>
                    <strong>位置:</strong> ${student.province}, ${student.city}
                </div>
            `);
            
            // 存储标记点信息
            marker.studentInfo = student;
            markers.push(marker);
        });
        
        // 渲染学生列表
        const studentList = document.getElementById('studentList');
        studentData.forEach(student => {
            const card = document.createElement('div');
            card.className = 'student-card';
            card.dataset.name = student.name;
            
            // 创建名字首字母头像
            const avatar = document.createElement('div');
            avatar.className = 'student-avatar';
            avatar.textContent = student.name.charAt(0);
            
            // 学生信息
            const info = document.createElement('div');
            info.className = 'student-info';
            info.innerHTML = `
                <h3>${student.name}</h3>
                <p><strong>${student.university}</strong></p>
                <p>${student.province} · ${student.city}</p>
            `;
            
            card.appendChild(avatar);
            card.appendChild(info);
            studentList.appendChild(card);
            
            // 添加点击事件 - 定位到该同学位置
            card.addEventListener('click', () => {
                // 找到对应的标记点
                const marker = markers.find(m => m.studentInfo.name === student.name);
                if (marker) {
                    // 打开弹出信息
                    marker.openPopup();
                    // 平滑移动到该位置
                    map.flyTo([student.lat, student.lng], 7, {
                        duration: 1.5
                    });
                    
                    // 添加高亮效果
                    card.style.boxShadow = '0 0 15px rgba(255, 204, 0, 0.7)';
                    setTimeout(() => {
                        card.style.boxShadow = '';
                    }, 1500);
                }
            });
        });
        
        // 搜索功能
        const searchInput = document.getElementById('searchInput');
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const cards = document.querySelectorAll('.student-card');
            
            cards.forEach(card => {
                const name = card.dataset.name.toLowerCase();
                const university = card.querySelector('p').textContent.toLowerCase();
                
                if (name.includes(searchTerm)) {
                    card.style.display = 'flex';
                } else if (university.includes(searchTerm)) {
                    card.style.display = 'flex';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>